<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper class="carousel" :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="(carousel,index) in carouselList" :key="index">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId='+carousel.movieId">
				<image :src="carousel.image" class="carousel"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->

		<!-- 热门超英 start -->
		<view class="page-block super-hot">
			<view class="hot-title-rapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">
					热门超英
				</view>
			</view>
		</view>

		<scroll-view scroll-x="true" class="page-block hot">
			<view v-for="(superhero,indexHero) in hotSuperheroList" :key="indexHero" class="single-poster">
				<view class="poster-wapper">
					<navigator open-type="navigate" :url="'../movie/movie?trailerId='+superhero.id">
					<image :src="superhero.cover" class="poster"></image>
					</navigator>
					<view class="movie-name">
						{{superhero.name}}
					</view>
					<trailerStars :innerScore="superhero.score" showNum="1"></trailerStars>
				</view>
			</view>
		</scroll-view>
		<!-- 热门超英 end -->
		
		<!-- 热门预告 start -->
		<view class="page-block super-hot">
			<view class="hot-title-rapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
		</view>
		<view class="hot-movies page-block">
			<video :id="trailer.id" :data-playingIndex="trailer.id" @play="meIsPlaying" v-for="trailer in hotTrailerList" :src="trailer.trailer" :poster="trailer.poster" class="hot-movie-single" :key="trailer.index" controls></video>
		</view>
		<!-- 热门预告 end -->
		
		<!-- 猜你喜欢 start -->
		<view class="page-block super-hot">
			<view class="hot-title-rapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>
		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(guess,gIndex) in guessULikeList" :key="gIndex">
				<navigator open-type="navigate" :url="'../movie/movie?trailerId='+guess.id">
				<image :src="guess.cover" class="like-movie"></image>
				</navigator>
				<view class="movie-desc">
					<view class="movie-title">
						{{guess.name}}
					</view>
					<trailerStars innerScore="9.1" showNum="0"></trailerStars>
					<view class="movie-info">
						{{guess.basicInfo}}
					</view>
					<view class="movie-info">
						{{guess.releaseDate}}
					</view>
				</view>
				
				<view class="movie-oper" :data-gIndex="gIndex" @click="praiseMe">
					<image src="../../static/icos/praise.png" class="praise-ico"></image>
					<view class="praise-me">
						赞一下
					</view>
					<view :animation="animationDataArr[gIndex]" class="praise-me animation-opacity">
						+1
					</view>
				</view>
			</view>
		</view>
		
		<!-- 猜你喜欢 end -->
	</view>
</template>

<script>
	// import common from "../../common/common.js"
	import trailerStars from '../../components/trailerStars.vue'
	export default {
		data() {
			return {
				carouselList: [],
				hotSuperheroList: [],
				hotTrailerList:[],
				animationData: {},
				guessULikeList: [],
				animationDataArr: [
					{},{},{},{},{}
				]
			}
		},
		onUnload() {
			//页面卸载的时候清除动画数据
			this.animationData = {}
			this.animationDataArr = [
					{},{},{},{},{}
				]
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onHide() {
			if(this.videoContext){
				this.videoContext.pause()
			}
		},
		
		onLoad() {
			// var me = this
			// #ifdef APP-PLUS || MP-WEIXIN
			//在页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation()
			// #endif
			//获取common.js中的服务器地址
			// var serverUrl = common.serverUrl
			//通过挂载到main.js中获取服务器地址作为全局变量
			var serverUrl = this.serverUrl
			//请求轮播图数据
			uni.request({
					url: serverUrl + '/index/carousel/list?qq=951473136',
					method: 'POST',
					success: (res) => {
						// console.log(res.data)
						//获取真实数据之前务必判断状态是否是200
						if (res.data.status == 200) {
							var carouselList = res.data.data
							this.carouselList = carouselList
						}
					}
				}),
				//查询热门超英
				uni.request({
					url: serverUrl + '/index/movie/hot?type=superhero&qq=951473136',
					method: 'POST',
					success: (res) => {
						// console.log(res.data)
						//获取真实数据之前务必判断状态是否是200
						if (res.data.status == 200) {
							var hotSuperheroList = res.data.data
							this.hotSuperheroList = hotSuperheroList
						}
					}
				}),
				//查询热门预告
				uni.request({
					url: serverUrl + '/index/movie/hot?type=trailer&qq=951473136',
					method: 'POST',
					success: (res) => {
						// console.log(res.data)
						//获取真实数据之前务必判断状态是否是200
						
						if (res.data.status == 200) {
							var hotTrailerList = res.data.data
							this.hotTrailerList = hotTrailerList
						}
					}
				}),
				this.refresh()
		},
		methods: {
			//播放一个视频的时候需要暂停其他视频
			meIsPlaying(e){
				var me = this
				var trailerId = ""
				if(e){
					trailerId = e.currentTarget.dataset.playingindex
					me.videoContext = uni.createVideoContext(trailerId)
				}
				var hotTrailerList = me.hotTrailerList
				for(var i=0;i<hotTrailerList.length;i++){
					var tempId = hotTrailerList[i].id
					if(tempId != trailerId){
						uni.createVideoContext(tempId).pause()
					}
				}
			},
			refresh(){
				
				uni.showLoading({
					mask:true
				})
				
				var serverUrl = this.serverUrl
				//查询猜你喜欢数据列表
				uni.request({
					url: serverUrl + '/index/guessULike?qq=951473136',
					method:"POST",
					success:(res)=> {
						if(res.data.status == 200){
							var guessULikeList = res.data.data
							this.guessULikeList = guessULikeList
						}
					},
					complete:()=> {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					},
				})
			},
			//实现点赞动画效果
			praiseMe(e){
				//所有通过dataset获取的内容里面所有的值都要写成小写
				// #ifdef APP-PLUS || MP-WEIXIN
				var gIndex = e.currentTarget.dataset.gindex
				// console.log(gIndex)
				//构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({duration:400})
				//导出动画数据到view组件，实现组件的动画效果
				this.animationData = this.animation
				this.animationDataArr[gIndex] = this.animationData.export()
				
				setTimeout(function(){
					this.animation.translateY(0).opacity(0).step({duration:0})
				this.animationData = this.animation
				this.animationDataArr[gIndex] = this.animationData.export()
				}.bind(this),500)
				// #endif
			}
		},
		components: {
			trailerStars
		}
	}
</script>

<style scoped>
	.carousel {
		width: 100%;
		height: 440upx;
	}

	/* 热门超英 start */
	.super-hot {
		margin-top: 12upx;
		padding: 20upx;

	}

	.hot-title-rapper {
		display: flex;
		flex-direction: row;
	}

	.hot-ico {
		width: 30upx;
		height: 30upx;
		margin-top: 15upx;
	}

	.hot-title {
		font-size: 20px;
		margin-left: 20upx;
		font-weight: bold;
	}

	.hot {
		width: 100%;
		white-space: nowrap;
	}

	.single-poster {
		display: inline-block;
		margin-left: 20upx;
	}

	.poster-wapper {
		display: flex;
		flex-direction: column;
	}

	.poster {
		width: 200upx;
		height: 270upx;
	}

	.movie-name {
		width: 200upx;
		margin-top: 10upx;
		font-size: 14px;
		font-weight: bold;
		/* name超出则省略 */
		white-space: nowrap;
		overflow: hidden;
		/* 省略号 */
		text-overflow: ellipsis;
	}

	/* 热门超英 end */
	
	/* 热门预告 start */
	.hot-movies {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0upx 20upx 20upx 20upx;
	}
	.hot-movie-single {
		width: 350upx;
		height: 220upx;
		margin-top: 10upx;
	}
	/* 热门预告 end */
	
	/* <!-- 猜你喜欢 start --> */
	.guess-u-like {
		display: flex;
		flex-direction: column;
	}
	.single-like-movie {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30upx 20upx;
	}
	.like-movie {
		width: 180upx;
		height: 240upx;
		border-radius: 3%;
	}
	.movie-desc {
		width: 340upx;
		display: flex;
		flex-direction: column;
	}
	.movie-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.movie-info {
		color: #808080;
		font-size: 14px;
	}
	.movie-oper {
		width: 140upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: dashed 2px;
		border-left-color: #dbdbda;
	}
	.praise-ico {
		width: 40upx;
		height: 40upx;
		align-self: center;
	}
	.praise-me {
		font-size: 14px;
		color: #feab2a;
		align-self: center;
		
	}
	.animation-opacity {
		font-weight: bold;
		opacity: 0;
	}
	/* 猜你喜欢 end */
</style>
